<template>
    <div class="madp-sort">
        <el-button v-if="permissions.cp_marketing_material_group_add" class="madp-add-sort" type="text" icon="el-icon-plus" size="medium" @click="addSortClick">添加分类</el-button>
        <div
            :class="activeObj.activeIndex == index ? 'madp-active-list' : 'madp-sort-list'"
            :style="activeObj.activeIndex == index ? { background: theme } : {}"
            v-for="(it, index) in sortList"
            :key="index"
            @click="activeClick(it, index)"
        >
            <span>
                {{ it.classificationName }}
                <el-popover placement="right" trigger="click">
                    <div class="madp-edit-delete">
                        <el-button v-if="permissions.cp_marketing_material_group_edit" type="text" class="madp-edit-btn" @click="editClick(it)"> <i class="el-icon-edit"></i>编辑 </el-button>
                        <el-button v-if="permissions.cp_marketing_material_group_del" type="text" class="madp-delete-btn" @click="deleteClassificationFn(it)">
                            <i class="el-icon-delete"></i>删除
                        </el-button>
                    </div>
                    <i slot="reference" v-show="index > 1" class="el-icon-s-operation"></i>
                </el-popover>
            </span>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="25%" :close-on-click-modal="false">
            <el-form :model="AddForm" :rules="AddFormrules" label-width="120px" ref="AddForm">
                <el-form-item label="分组分类:" prop="classificationName" v-if="AddForm">
                    <el-input
                        v-model.trim="AddForm.classificationName"
                        placeholder="请输入分类名称"
                        @input="AddForm.classificationName = AddForm.classificationName.replace(/\s+/, '')"
                        maxlength="4"
                    ></el-input>
                </el-form-item>
                <el-form-item class="madp-bttons">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="commitSortClick">{{ dialogTitle == '添加分类' ? '提交' : '保存' }}</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getClassificationList, newAndEditClassification, deleteClassification } from '@/api/customer-into/marketing-material';
import { mapGetters } from 'vuex';

export default {
    name: 'sort',
    data() {
        return {
            newShow: 0, //0 新增 1是修改
            // 当前选中内容
            activeObj: {
                activeIndex: 0
            },
            // 弹窗标题
            dialogTitle: '',
            dialogVisible: false, //默认关闭
            // 表单内容
            AddForm: {
                classificationName: null
            },
            // 表单校验规则
            AddFormrules: {
                classificationName: [
                    {
                        required: true,
                        message: '请输入分类名称',
                        trigger: 'blur'
                    }
                ]
            },
            // 显示内容
            sortList: [{ classificationName: '推荐' }, { classificationName: '热榜' }],
            // 编辑内容id
            editId: null
        };
    },
    created() {
        this.getClassificationListFn();
    },
    mounted: function() {},
    computed: {
        ...mapGetters(['theme', 'permissions'])
    },
    methods: {
        //选中每一个
        activeClick(value, index) {
            this.activeObj = { ...value, activeIndex: index };
            this.$emit('sortObj', this.activeObj);
        },
        //编辑
        editClick(row) {
            this.dialogTitle = '编辑分类';
            this.AddForm.classificationName = row.classificationName;
            this.editId = row.id;
            this.dialogVisible = true;
            this.newShow = 1;
        },
        //添加分类
        addSortClick() {
            this.dialogTitle = '添加分类';
            this.AddForm.classificationName = '';
            this.dialogVisible = true;
            this.newShow = 0;
        },
        //添加分类确定按钮
        commitSortClick() {
            this.$refs.AddForm.validate((valid) => {
                if (valid) {
                    this.newAndEditClassificationFn();
                }
            });
        },
        // 分类列表
        getClassificationListFn() {
            getClassificationList().then((res) => {
                if (res.data.code === 0) {
                    let defaultArr = [{ classificationName: '推荐' }, { classificationName: '热榜' }];
                    this.sortList = defaultArr.concat(res.data.data);
                }
            });
        },
        //分类的新增post 编辑put
        newAndEditClassificationFn() {
            let obj = {
                classificationName: this.AddForm.classificationName
            };
            if (this.newShow == 1) {
                obj.id = this.editId;
            }
            newAndEditClassification(obj, this.newShow == 0 ? 'post' : 'put').then((res) => {
                if (res.data.code === 0) {
                    if (this.newShow == 1) {
                        this.$message.success('编辑成功');
                    } else {
                        this.$message.success('新增成功');
                    }
                    this.getClassificationListFn();
                    this.dialogVisible = false;
                }
            });
        },
        // 分类删除
        deleteClassificationFn(row) {
            deleteClassification(row.id).then((res) => {
                if (res.data.code === 0) {
                    this.$message.success('删除成功');
                    this.getClassificationListFn();
                    this.dialogVisible = false;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.madp-sort {
    width: 10rem;
    text-align: center;
    margin-right: 10px;
    border-right: 1px solid #dcdfe6;
    .madp-sort-list {
        position: relative;
        margin-top: 15px;
        margin-right: 10px;
        cursor: pointer;
        line-height: 30px;
        span {
            font-size: 14px;
        }
        .el-icon-s-operation {
            position: absolute;
            top: 8px;
            right: 5px;
            font-weight: 600;
        }
        .el-button--text {
            color: #666;
        }
    }
    .madp-active-list {
        position: relative;
        margin-top: 15px;
        margin-right: 10px;
        border-radius: 4px;
        cursor: pointer;
        line-height: 30px;
        span {
            color: #fff;
        }
        .el-icon-s-operation {
            position: absolute;
            top: 8px;
            right: 5px;
            font-weight: 600;
        }
    }
    .madp-bttons {
        margin-top: 40px;
        display: flex;
        justify-content: flex-end;
    }
}
.madp-edit-delete {
    display: flex;
    flex-direction: column;
}
.madp-edit-btn {
    font-size: 12px;
}
.madp-delete-btn {
    margin-left: 0;
    font-size: 12px;
}
</style>
